<template>
  <div class="dashboard">
    <a-layout>
      <a-layout-header class="header">
        <div class="header-content">
          <h2>工单管理系统</h2>
          <div class="user-info">
            <span>欢迎，{{ currentUser?.username }}</span>
            <a-tag :color="currentUser?.role === 'admin' ? 'red' : 'blue'">
              {{ currentUser?.role === 'admin' ? '管理员' : '普通用户' }}
            </a-tag>
            <a-button type="link" @click="handleLogout">退出登录</a-button>
          </div>
        </div>
      </a-layout-header>
      
      <a-layout-content class="content">
        <WorkOrderTable 
          :work-orders="workOrders" 
          @delete="handleDeleteWorkOrder"
        />
        <ProjectChart :work-orders="workOrders" />
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { Layout, message } from 'ant-design-vue';
import WorkOrderTable from '../components/WorkOrderTable.vue';
import ProjectChart from '../components/ProjectChart.vue';
import { useUser } from '../components/useUser.js';

const router = useRouter();
const { currentUser, setCurrentUser } = useUser();

// 模拟数据
const initialWorkOrders = ref([
  {
    id: '001',
    project: 'Road Project A',
    overtime: true,
    hours: 3.5,
    created_at: '2024-04-10 10:30'
  },
  {
    id: '002',
    project: 'Bridge Maintenance B',
    overtime: false,
    hours: 2,
    created_at: '2024-04-09 13:00'
  },
  {
    id: '003',
    project: 'Pipeline Fix C',
    overtime: true,
    hours: 4.5,
    created_at: '2024-04-08 08:00'
  },
  {
    id: '004',
    project: 'Bridge Maintenance B',
    overtime: true,
    hours: 3,
    created_at: '2024-04-07 16:45'
  },
  {
    id: '005',
    project: 'Tunnel Cleaning D',
    overtime: false,
    hours: 8.1,
    created_at: '2024-04-03 11:43'
  }
]);

const workOrders = ref([...initialWorkOrders.value]);

const handleDeleteWorkOrder = (id) => {
  workOrders.value = workOrders.value.filter(order => order.id !== id);
};

const handleLogout = () => {
  setCurrentUser(null);
  message.success('已退出登录');
  router.push('/');
};
</script>

<style lang="less" scoped>
.dashboard {
  height: 100vh;
  
  .header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
      
      .user-info {
        display: flex;
        align-items: center;
        gap: 12px;
      }
    }
  }
  
  .content {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
  }
}
</style>